<template>
	<div>
		<el-tabs v-model="current" tab-position="left">
			<el-tab-pane name="0" label="阿里云">
				<el-form ref="aliForm" :model="aliForm" :rules="aliRule" style="width: 80%; min-width: 800px" label-width="140px">
					<el-form-item label="AppId" prop="appId">
						<el-input v-model="aliForm.paramMap.appId" autocomplete="off" placeholder="请输入AppId"></el-input>
					</el-form-item>
					<el-form-item prop="secretId">
						<template #label>
							AccessKey ID
							<el-tooltip placement="top">
								<div slot="content">
									访问阿里云控制台获取：
									<a target="aliyun" href="https://ram.console.aliyun.com/manage/ak">
										https://ram.console.aliyun.com/manage/ak
									</a>
								</div>
								<i class="el-icon-info"></i>
							</el-tooltip>
						</template>
						<el-input v-model="aliForm.paramMap.secretId" autocomplete="off" placeholder="请输入AccessKey ID"></el-input>
					</el-form-item>
					<el-form-item label="AccessKey Secret" prop="secretKey">
						<el-input v-model="aliForm.paramMap.secretKey" autocomplete="off" placeholder="请输入AccessKey Secret"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane name="1" label="腾讯云">
				<el-form
					ref="tencentForm"
					:model="tencentForm"
					:rules="tencentRule"
					style="width: 80%; min-width: 800px"
					label-width="140px"
				>
					<el-tag
						:type="item.type"
						closable
						@close="onclose(index)"
						style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 25px; "
						v-for="(item, index) in tag"
						:key="index"
					>
						{{ item.text }}
					</el-tag>
					<el-form-item prop="appId">
						<template #label>
							AppId
							<el-tooltip placement="top">
								<div slot="content">
									访问腾讯云控制台获取：
									<a target="tencent" href="https://console.cloud.tencent.com/cam/capi">
										https://console.cloud.tencent.com/cam/capi
									</a>
								</div>
								<i class="el-icon-info"></i>
							</el-tooltip>
						</template>
						<el-input v-model="tencentForm.paramMap.appId" autocomplete="off" placeholder="请输入AppId"></el-input>
					</el-form-item>
					<el-form-item prop="secretId">
						<template #label>
							SecretId
							<el-tooltip placement="top">
								<div slot="content">
									访问腾讯云控制台获取：
									<a target="tencent" href="https://console.cloud.tencent.com/cam/capi">
										https://console.cloud.tencent.com/cam/capi
									</a>
								</div>
								<i class="el-icon-info"></i>
							</el-tooltip>
						</template>
						<el-input v-model="tencentForm.paramMap.secretId" autocomplete="off" placeholder="请输入SecretId"></el-input>
					</el-form-item>
					<el-form-item label="SecretKey" prop="secretKey">
						<el-input v-model="tencentForm.paramMap.secretKey" autocomplete="off" placeholder="请输入SecretKey"></el-input>
					</el-form-item>
					<el-form-item label="所属地域" prop="cosRegion">
						<el-input v-model="tencentForm.paramMap.cosRegion" autocomplete="off" placeholder="请输入所属地域"></el-input>
					</el-form-item>
					<el-form-item label="存储桶名称" prop="bucketName">
						<el-input v-model="tencentForm.paramMap.bucketName" autocomplete="off" placeholder="请输入存储桶名称"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane name="2" label="Castle云">
				<el-form ref="castleForm" :model="castleForm" :rules="castleRule" style="width: 80%; min-width: 800px" label-width="140px">
					<el-form-item prop="secretId">
						<template #label>
							SecretId
							<el-tooltip placement="top">
								<div slot="content">
									访问Castle云控制台获取：
									<a target="tencent" href="https://console.icuapi.com/secret">
										https://console.icuapi.com/secret
									</a>
								</div>
								<i class="el-icon-info"></i>
							</el-tooltip>
						</template>
						<el-input v-model="castleForm.paramMap.secretId" autocomplete="off" placeholder="请输入SecretId"></el-input>
					</el-form-item>
					<el-form-item label="SecretKey" prop="secretKey">
						<el-input v-model="castleForm.paramMap.secretKey" autocomplete="off" placeholder="请输入SecretKey"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane name="3" label="JCSEG设置">
				<el-form ref="jcsegForm" :model="jcsegForm" :rules="jcsegRule" style="width: 80%; min-width: 800px" label-width="170px">
					<el-form-item label="关键字字典配置路径：" prop="folderPath">
						<el-input v-model="jcsegForm.paramMap.folderPath" autocomplete="off" placeholder="请输入folderPath"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<el-button type="primary" @click="onSubmit">保存</el-button>
	</div>
</template>

<script>
import request from "@/common/request"

export default {
	data() {
		return {
			current: "0",
			aliForm: {
				bindCode: "PLAT_ALI",
				bindDetail: "",
				groupCode: "",
				id: "",
				paramMap: {
					appId: "",
					secretId: "",
					secretKey: "",
				},
			},
			aliRule: {
				"paramMap.appId": [{ required: true, message: "请输入AppId", trigger: "blur" }],
				"paramMap.secretId": [{ required: true, message: "请输入AccessKey ID", trigger: "blur" }],
				"paramMap.secretKey": [{ required: true, message: "请输入AccessKey Secret", trigger: "blur" }],
			},

			tencentForm: {
				bindCode: "PLAT_TENCENT",
				bindDetail: "",
				groupCode: "",
				id: "",
				paramMap: {
					appId: "",
					secretId: "",
					secretKey: "",
					cosRegion: "",
				},
			},
			tencentRule: {
				"paramMap.secretId": [{ required: true, message: "请输入SecretId", trigger: "blur" }],
				"paramMap.secretKey": [{ required: true, message: "请输入SecretKey", trigger: "blur" }],
				"paramMap.appId": [{ required: true, message: "请输入AppId", trigger: "blur" }],
				"paramMap.cosRegion": [{ required: true, message: "请输入所属地域", trigger: "blur" }],
				"paramMap.bucketName": [{ required: true, message: "请输入存储桶名称", trigger: "blur" }],
			},

			castleForm: {
				bindCode: "PLAT_CASTLE",
				bindDetail: "",
				secretId: "",
				secretKey: "",
				groupCode: "",
				id: "",
				paramMap: {
					secretId: "",
					secretKey: "",
					folderPath: "",
				},
			},
			jcsegForm: {
				bindCode: "CODE_JCSEG",
				bindDetail: "",
				groupCode: "",
				id: "",
				paramMap: {
					folderPath: "",
				},
			},
			castleRule: {
				"paramMap.secretId": [{ required: true, message: "请输入SecretId", trigger: "blur" }],
				"paramMap.secretKey": [{ required: true, message: "请输入SecretKey", trigger: "blur" }],
			},
			jcsegRule: {
				"paramMap.folderPath": [{ required: true, message: "请输入folderPath", trigger: "blur" }],
			},
			tag: [
				{
					type: "primary",
					text: "关键字提取、摘要提取、文本纠错基于腾讯云的 自然语言处理(NLP)，文本审核基于对象存储(OSS)",
				},
			],
		}
	},
	created() {
		this.getData()
	},
	methods: {
		async getData() {
			const { data } = await request("get", "/system/configApi/list")

			const aliData = data.find(item => item.bindCode === "PLAT_ALI")
			const tencentData = data.find(item => item.bindCode === "PLAT_TENCENT")
			const castleData = data.find(item => item.bindCode === "PLAT_CASTLE")
			const jcsegData = data.find(item => item.bindCode === "CODE_JCSEG")

			if (aliData) {
				this.aliForm = {
					bindCode: "PLAT_ALI",
					bindDetail: aliData.bindDetail,
					groupCode: aliData.groupCode,
					id: aliData.id,
					paramMap: {
						appId: aliData.paramMap.appId,
						secretId: aliData.paramMap.secretId,
						secretKey: aliData.paramMap.secretKey,
					},
				}
			}
			if (tencentData) {
				this.tencentForm = {
					bindCode: "PLAT_TENCENT",
					bindDetail: tencentData.bindDetail,
					groupCode: tencentData.groupCode,
					id: tencentData.id,
					paramMap: {
						appId: tencentData.paramMap.appId,
						secretId: tencentData.paramMap.secretId,
						secretKey: tencentData.paramMap.secretKey,
						cosRegion: tencentData.paramMap.cosRegion,
						bucketName: tencentData.paramMap.bucketName,
					},
				}
			}
			if (castleData) {
				this.castleForm = {
					bindCode: "PLAT_CASTLE",
					bindDetail: castleData.bindDetail,
					groupCode: castleData.groupCode,
					id: castleData.id,
					paramMap: {
						secretId: castleData.paramMap.secretId,
						secretKey: castleData.paramMap.secretKey,
					},
				}
			}
			if (jcsegData) {
				this.jcsegForm = {
					bindCode: "CODE_JCSEG",
					bindDetail: jcsegData.bindDetail,
					groupCode: jcsegData.groupCode,
					id: jcsegData.id,
					paramMap: {
						folderPath: jcsegData.paramMap.folderPath,
					},
				}
			}
		},

		async onSubmit() {
			const refs = [this.$refs.aliForm, this.$refs.tencentForm, this.$refs.castleForm, this.$refs.jcsegForm]
			const formData = [this.aliForm, this.tencentForm, this.castleForm, this.jcsegForm][this.current]
			refs[this.current].validate(async valid => {
				if (valid) {
					formData.bindDetail = JSON.stringify(formData.paramMap)
					const { code, msg } = await request("post", "/system/configApi/edit", formData)
					if (code === 0) {
						this.$message.success("保存成功")
					} else {
						this.$message.error(msg)
					}
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped></style>
